<template>
    <div class="pinpai">
       <mt-header title="旗袍品牌" :fixed="isFixed">
        <router-link to="/" slot="left">
          <div class="iconfont">&#xe603;</div>
        </router-link>
        <router-link to="ShopCar" slot="right">
        <div class="shop-car iconfont">&#xe601;</div>
      </router-link>
      </mt-header>
        <div class="kong"></div>
     <tab-bar></tab-bar>
     <mt-swipe class="swipe" :auto="2000">
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner8.jpg"></mt-swipe-item>
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner6.jpg"></mt-swipe-item>
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner3.jpg"></mt-swipe-item>
      </mt-swipe> 
       <router-link to="XiangQing" slot="left">
            <div class="pinpl">
                <div class="lib">
                        <div class="wenzi">
                          <img class="guan" src="../../assets/img/images/logo1.png" alt="">
                      </div>
                      <div class="brand">
                            <div class="brand-into">
                                <h2>观唐古典旗袍旗舰店</h2>
                                <p>描述：<span>4.8</span></p>
                                <p>服务：<span>4.8</span></p>
                                <p>物流：<span>4.8</span></p>
                            </div>
                            <div class="brand-show">
                                <img src="../../assets/img/images/brand1.png" alt="">
                                <img src="../../assets/img/images/brand2.png" alt="">
                                <img src="../../assets/img/images/brand3.png" alt="">
                            </div>
                        </div>
                        <div class="rjiantou">
                            <img src="../../assets/img/images/more.png" alt="">
                        </div>
                </div>
            </div>
            <div class="pinpl">
                <div class="lib">
                        <div class="wenzi">
                          <img class="guan" src="../../assets/img/images/logo2.png" alt="">
                      </div>
                      <div class="brand">
                            <div class="brand-into">
                                <h2>创彩原创旗袍服饰旗舰店</h2>
                                <p>描述：<span>4.8</span></p>
                                <p>服务：<span>4.8</span></p>
                                <p>物流：<span>4.8</span></p>
                            </div>
                            <div class="brand-show">
                                <img src="../../assets/img/images/brand4.png" alt="">
                                <img src="../../assets/img/images/brand5.png" alt="">
                                <img src="../../assets/img/images/brand6.png" alt="">
                            </div>
                        </div>
                        <div class="rjiantou">
                            <img src="../../assets/img/images/more.png" alt="">
                        </div>
                </div>
            </div>
            <div class="pinpl">
                <div class="lib">
                        <div class="wenzi">
                          <img class="guan" src="../../assets/img/images/logo3.png" alt="">
                      </div>
                      <div class="brand">
                            <div class="brand-into">
                                <h2>华族旗袍旗舰店</h2>
                                <p>描述：<span>4.8</span></p>
                                <p>服务：<span>4.8</span></p>
                                <p>物流：<span>4.8</span></p>
                            </div>
                            <div class="brand-show">
                                <img src="../../assets/img/images/brand7.png" alt="">
                                <img src="../../assets/img/images/brand8.png" alt="">
                                <img src="../../assets/img/images/brand9.png" alt="">
                            </div>
                        </div>
                        <div class="rjiantou">
                            <img src="../../assets/img/images/more.png" alt="">
                        </div>
                </div>
            </div>
            <div class="pinpl">
                <div class="lib">
                        <div class="wenzi">
                          <img class="guan" src="../../assets/img/images/logo4.png" alt="">
                      </div>
                      <div class="brand">
                            <div class="brand-into">
                                <h2>尚品斋旗袍折扣店</h2>
                                <p>描述：<span>4.8</span></p>
                                <p>服务：<span>4.8</span></p>
                                <p>物流：<span>4.8</span></p>
                            </div>
                            <div class="brand-show">
                                <img src="../../assets/img/images/brand10.png" alt="">
                                <img src="../../assets/img/images/brand11.png" alt="">
                                <img src="../../assets/img/images/brand12.png" alt="">
                            </div>
                        </div>
                        <div class="rjiantou">
                            <img src="../../assets/img/images/more.png" alt="">
                        </div>
                </div>
            </div>
          </router-link>
            <img class="bei2" src="../../assets/img/images/banner7.jpg">
             <div class="kong2"></div>
    </div>
</template>

<script>
	 import TabBar from '../public/Public'
    export default {
        name: "PinPai",
         data(){
          return{
            isFixed:true,
          }
        },
         components:{
          TabBar
        }
    }
</script>

<style scoped>
 header{
    border-color: #111;
    background-color: #581513;
    color: #fff;
  }
    .kong{
    height:40px;
    position: relative;
  }
  .kong2{
    height:36px;
  }
    .swipe{
    height:156px;
  }
    .lunbo{
    height:156px;
  }
  .lib{
    padding: 10px;
    background-color: #e8d6c3;
    height: 120px;
    letter-spacing: 0px;
    font-size: 0px;
    margin-bottom: 10px;
  }
  .wenzi{
    display: inline-block;
    position: relative;
    width: 72px;
    height: 120px;
    vertical-align: top;
  }
  .guan{
    display: block;
    position: absolute;
    top:18px;
    width: 72px;
    height: 72px;
  }
  .brand{
    display: inline-block;
    vertical-align: top;
    width: 65%;
    padding: 0 10px;
  }
  .brand-into h2{
    font-size: 15px;
    color: #60251f;
  }
  .brand-into p{
    display: inline-block;
    color: #60251f;
    font-size: 10px;
    padding-right: 10px;
    transform: scale(0.8);
    -webkit-transform-origin: left;
  }
  .brand-show{
    width:100%;
    overflow: hidden;
  }
  .brand-show img{
    width: 60px;
    display: block;
    float: left;
    padding-right:5px;
  }
  .rjiantou{
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 12px;
    height: 120px;
    float: right;
  }
  .rjiantou img{
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-6px,-19px);
  }
  .bei2{
    width:100%;
    display:inline-block;
    padding-bottom: 20px;
    padding-top:10px;
  }
</style>
